<template>
  <div class="sidebar">
    <h2>侧边栏标题</h2>
    <ul>
      <li
        v-for="(item, index) in sidebarItems"
        :key="index"
        @click="goToPage(item.link)"
        style="cursor: pointer;"
      >
        {{ item.label }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

// 侧边栏数据
const sidebarItems = [
  { label: "首页", link: "/home" },
  { label: "投诉反馈", link: "/feedback" },
  
  { label: "联系", link: "/contact" }
]

// 页面跳转方法
const router = useRouter()
const goToPage = (path) => {
  router.push(path)
}
</script>

<style scoped>
.sidebar {
  width: 250px; /* 设置侧边栏宽度 */
  background-color: #2a2a3d;
  color: white;
  padding: 1rem;
  box-sizing: border-box;
  overflow-y: auto;
}

.sidebar h2 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.sidebar ul {
  list-style-type: none;
  padding-left: 0;
}

.sidebar li {
  margin-bottom: 0.75rem;
  cursor: pointer;
}
</style>